import React from "react";

interface ImageDisplayProps {
  /** 文件名或路径 */
  fileName: string;
  /** 自定义宽度 */
  width?: number | string;
  /** 自定义高度 */
  height?: number | string;
  /** 替代文本 */
  altText?: string;
}

const ImageDisplay: React.FC<ImageDisplayProps> = ({
  fileName,
  width = "100%",
  height = "auto",
  altText = "图片加载失败",
}) => {
  const imagePath = fileName.startsWith("/")
    ? fileName
    : `/src/assets/images/${fileName}`;

  return (
    <img
      src={imagePath}
      alt={altText}
      style={{ width, height, objectFit: "contain" }}
    />
  );
};

export default ImageDisplay;
